<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>shop_homework</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

<style type="text/css">
  table {
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }

  table td, table th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 60px;
  }

  table thead th {
    background-color: #CCE8EB;
    width: 200px;
  }

  table tr:nth-child(odd) {
    background: #fff;
  }

  table tr:nth-child(even) {
    background: #F5FAFA;
  }
</style>

<body>
<div id="app">

  <table v-show="isShow">
    <thead>
    <tr>
      <th>索引</th>
      <th>书名</th>
      <th>价格</th>
      <th>数量</th>
      <th>移除</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(value,index) in books">
      <td>{{index + 1}}</td>
      <td v-for="(i,key) in value">

      <span v-if=" key === 'nums' ">
        <button @click="addnums(index)">+</button>
        {{i}}
        <button @click="decnums(index)">-</button>
      </span>
        <span v-else-if="key==='price' ">
          {{oneprice(index) | chineseprice}}
        </span>
        <span v-else>{{i}}</span>
      </td>
      <td>
        <button @click="yichu(index)">移除</button>
      </td>
    </tr>
    </tbody>
    <tr>
      <td colspan="2">
        总价:
      </td>
      <td colspan="3">
        {{allprice | chineseprice}}
      </td>
    </tr>
  </table>
  <h3 v-show="!isShow">无东西</h3>
  <button @click="ppp">测试请求</button>
  <h1>{{tip}}</h1>
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      books: /*[
        {names: "语文习题大全", price: 259, nums: 1},
        {names: "数学习题大全", price: 156, nums: 1},
        {names: "英语习题大全", price: 333, nums: 1},
        {names: "历年正题大全", price: 988, nums: 1},
      ],*/" ",
      tip: "NULL"
    },
    methods: {
      addnums(index) {
        this.books[index].nums += 1
      },
      decnums(index) {
        if (this.books[index].nums > 0) {
          this.books[index].nums += -1
        }
      },
      oneprice(index) {
        return this.books[index].nums * this.books[index].price
      },
      yichu(index) {
        this.books.splice(index, 1)
      },
      ppp() {
        // GET /someUrl
        this.$http({
          method: "GET",
          url: "/tip",
          params: {
            name: "age",
            age: 20
          }
        }).then(response => {

          // get body data
          console.log(response.body)
          this.tip = response.body.name;

        }, response => {
          // error callback
          console.log("error response")
        });
      }
    },
    filters: {
      chineseprice(a) {
        return "¥:" + a.toFixed(2)
      }
    },
    computed: {
      allprice() {
        let result = 0
        for (i of this.books) {
          result += i.price * i.nums
        }
        return result
      },
      isShow() {
        return this.books.length >= 1
      }
    }
  })

  app.$http({
    method: "GET",
    url: "/findAll"
  }).then(response => {
    // get body data
    app.books = response.body;

  }, response => {
    // error callback
    console.log("error response")
  });
</script>

</body>
</html>